<template>
  <div>
    <TabsView />
    <span style="font-size: 25px; font-weight: bold; color: #fb6"
      >员工列表</span
    >
    <el-divider></el-divider>
    <el-button
      type="primary"
      @click="(dialogFormVisible = true), (flag = 0)"
      plain
      >添加员工</el-button
    >
    <el-table
      :data="
        tableData
          ? tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          : []
      "
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="员工工号" sortable width="100">
        <template slot-scope="scope"
          ><el-tag>{{ scope.row.id }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="roleName" label="职位"> </el-table-column>
      <el-table-column prop="workName" label="员工姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope"
          ><el-tag :type="scope.row.sex == '0' ? 'success' : 'warning'">{{
            scope.row.sex==0?'男':'女'
          }}</el-tag></template
        >
      </el-table-column>
      <el-table-column prop="createTime" label="入职时间"> </el-table-column>
      <el-table-column prop="birthday" label="出生日期"> </el-table-column>
      <el-table-column prop="workPhone" label="电话"> </el-table-column>
      <el-table-column prop="idCard" label="身份证号"> </el-table-column>
      <el-table-column prop="" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="editp(scope.row)" plain>编辑</el-button>
          <!-- 删除员工按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="delp(scope.row)"
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑的对话框 --> 
    <el-dialog :title="this.flag==0?'添加员工信息':'编辑员工信息'" :visible.sync="dialogFormVisible">
      <el-form :model="form" class="ddy">
        <el-form-item label="员工工号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off" class="srk">{{
            form.id
          }}</el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth">
          <el-select v-model="form.roleId" placeholder="请选择 职业" class="srk">
            <el-option
              :label="v.roleName"
              v-for="v in role"
              :key="v.id"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="form.workName" autocomplete="off" class="srk">
            {{ form.workName }}</el-input
          >
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.sex" autocomplete="off" class="srk">{{
            form.sex
          }}</el-input> -->
          <el-select v-model="form.sex" placeholder="请选择性别" class="srk">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.createTime"
              class="srk"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birthday"
              class="srk"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.workPhone" autocomplete="off" class="srk">{{
            form.workphone
          }}</el-input>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.idCard" autocomplete="off" class="srk">{{
            form.pid
          }}</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addfun()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      
    >
    <!-- :total="yema" -->
    </el-pagination>
  </div>
</template>

<script>
import {
  worker,
  editperson,
  addperson,
  delperson,
  lookrole,
} from "../../apis/pm/link.js";
import TabsView from "./TabsView.vue";

export default {
  components: { TabsView },
  data() {
    return {
      tableData: [],
      arr: "",
      // 默认显示第几页
      currentPage: 1,
      flag: 1,
      pagesize: 8,
      dialogTableVisible: false,
      dialogFormVisible: false,
      yema:null,
      lengtha:null,
      role: [],
      form: {
        id: "",
        roleId: "",
        workName: "",
        sex: "",
        createTime: "",
        birthday: "",
        workPhone: "",
        idCard: "",
      },
      formLabelWidth: "100px",
    };
  },
  methods: {
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
      console.log(pagesize)
      // this.yema=this.lengtha*pagesize
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(currentPage)
      
    },
    //删除员工
    delp(row) {
      delperson(row.id).then((ok) => {
        console.log(ok);
        worker().then((ok) => {
          console.log(ok);
          this.$router.go(0)
          this.tableData = ok.data.data;
          this.arr = ok.data.data.length;
        });
      });
    },
    // 添加员工

    addfun() {
      // flag=0是添加函数
        this.dialogFormVisible = false;
      if (this.flag == 0) {
        console.log(111);
        addperson(
          this.form.roleId,
          this.form.workName,
          this.form.sex,
          this.form.createTime,
          this.form.birthday,
          this.form.workPhone,
          this.form.idCard
        ).then((ok) => {
          console.log(ok.data.data, 111);
          this.$router.go(0)
          worker().then((ok) => {
            console.log(ok);
            this.tableData = ok.data.data;
            this.arr = ok.data.length;
          });
        });
    }
    else{
      editperson(
        this.form.id,
        this.form.roleId,
        this.form.workName,
        this.form.sex,
        this.form.createTime,
        this.form.birthday,
        this.form.workPhone,
        this.form.idCard
      ).then((ok) => {
        console.log(ok.data.data);
        this.$router.go(0)
      });
    }
    },
    // 编辑
    
    editp(row) {
      this.flag=1;
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.roleId = row.roleId;
      this.form.createTime = row.createTime;
      this.form.sex = row.sex;
      this.form.date = row.date;
      this.form.birthday = row.birthday;
      this.form.workPhone = row.workPhone;
      this.form.idCard = row.idCard;
    }
    
    
  },
  mounted() {
    worker().then((ok) => {
      console.log(ok.data.data);
      this.tableData = ok.data.data;
      this.arr = ok.data.length;

    });
    lookrole().then((ok) => {
      console.log(ok.data.data);
      this.role = ok.data.data;
      // this.yema=ok.data.data.length*4
      // this.lengtha=ok.data.data.length
    });
  },
};
</script>

<style lang="scss" scoped>
.ddy {
  display: flex;
  flex-wrap: wrap;
  .srk {
    width: 260px;
    height: 20px;
  }
}
</style>
